<template>
    <el-dialog
        title="接入源信息"
        :visible.sync="dialogVisible"
        :before-close="closeDialog"
        :close-on-click-modal="false"
        :append-to-body="true"
        class="accessSource"
    >
        <div v-loading="loading">
            <el-form
                ref="ruleForm"
                :model="ruleForm"
                label-width="150px"
                label-position="left"
                style="margin:0 20px"
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="接入源名称：">
                            <el-input
                                v-model="ruleForm.sourceName"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="业务系统名称：">
                            <el-input
                                v-model="ruleForm.systemName"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="接入源类型：">
                            <el-col :span="2">
                                <div>
                                    <span
                                        v-for="(value,key,index) in SOURCE_TYPE"
                                        :key="index"
                                        class="radio-label"
                                        style="min-width: 50px;"
                                    >{{ value.name }}</span>
                                </div>
                            </el-col>
                            <el-col :span="22">
                                <el-radio-group
                                    v-model="ruleForm.assetSourceDialectType"
                                    class="radio-group"
                                    disabled
                                >
                                    <div
                                        v-for="(value,key,index) in SOURCE_TYPE"
                                        :key="index"
                                        class="item-line"
                                    >
                                        <el-radio
                                            v-for="(item,index) in value.value"
                                            :key="index"
                                            class="radio-item"
                                            :label="item.id"
                                        >
                                            {{ item.name }}
                                        </el-radio>
                                    </div>
                                </el-radio-group>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10001 || ruleForm.assetSourceDialectType ==10002 || ruleForm.assetSourceDialectType ==10003 || ruleForm.assetSourceDialectType ==10004 || ruleForm.assetSourceDialectType ==10005 || ruleForm.assetSourceDialectType ==10006 || ruleForm.assetSourceDialectType ==10008 || ruleForm.assetSourceDialectType ==10010 || ruleForm.assetSourceDialectType ==10020 || ruleForm.assetSourceDialectType ==10024"
                        :span="12"
                    >
                        <el-form-item label="ip地址/主机名：">
                            <el-input
                                v-model="ruleForm.ip"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10007 || ruleForm.assetSourceDialectType ==10025"
                        :span="12"
                    >
                        <el-form-item label="接入端IP：">
                            <el-input
                                v-model="ruleForm.insertIp"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10007 || ruleForm.assetSourceDialectType ==10025"
                        :span="12"
                    >
                        <el-form-item label="服务端IP：">
                            <el-input
                                v-model="ruleForm.ip"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10007 || ruleForm.assetSourceDialectType ==10025"
                        :span="12"
                    >
                        <el-form-item label="证书：">
                            <el-input
                                v-if="ruleForm.assetSourceDialectType!='10007'"
                                v-model="ruleForm.secretKey"
                                disabled
                            ></el-input>
                            <el-input
                                v-if="ruleForm.assetSourceDialectType=='10007'"
                                v-model="'name:'+ruleForm.secretName+'\nsecretKey:'+ruleForm.secretKey"
                                type="textarea"
                                :rows="3"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="端口号：">
                            <el-input
                                v-model="ruleForm.port"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10025"
                        :span="12"
                    >
                        <el-form-item label></el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10001 || ruleForm.assetSourceDialectType ==10002 || ruleForm.assetSourceDialectType ==10003 || ruleForm.assetSourceDialectType ==10004 || ruleForm.assetSourceDialectType ==10005 || ruleForm.assetSourceDialectType ==10010 || ruleForm.assetSourceDialectType ==10020 || ruleForm.assetSourceDialectType ==10008"
                        :span="12"
                    >
                        <el-form-item label="登录名：">
                            <el-input
                                v-model="ruleForm.userName"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10001 || ruleForm.assetSourceDialectType ==10002 || ruleForm.assetSourceDialectType ==10003 || ruleForm.assetSourceDialectType ==10004 || ruleForm.assetSourceDialectType ==10005 || ruleForm.assetSourceDialectType ==10010 || ruleForm.assetSourceDialectType ==10020 || ruleForm.assetSourceDialectType ==10008"
                        :span="12"
                    >
                        <el-form-item label="密码：">
                            <el-input
                                v-model="ruleForm.pwd"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10001 || ruleForm.assetSourceDialectType ==10003 || ruleForm.assetSourceDialectType ==10004 || ruleForm.assetSourceDialectType ==10020"
                        :span="12"
                    >
                        <el-form-item label="数据库名：">
                            <el-input
                                v-model="ruleForm.databaseName"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10002 || ruleForm.assetSourceDialectType ==10008"
                        :span="12"
                    >
                        <el-form-item label="实例/数据库名：">
                            <el-input
                                v-model="ruleForm.databaseName"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10002 || ruleForm.assetSourceDialectType ==10008"
                        :span="12"
                    >
                        <el-form-item label="模式名：">
                            <el-input
                                v-model="ruleForm.schemaName"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10003||ruleForm.assetSourceDialectType ==10004"
                        :span="12"
                    >
                        <el-form-item label="模式名：">
                            <el-input
                                v-model="ruleForm.schemaName"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10005"
                        :span="12"
                    >
                        <el-form-item label="FTP系统编码：">
                            <el-input
                                v-model="ruleForm.systemFormat1"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10010||ruleForm.assetSourceDialectType ==10005"
                        :span="12"
                    >
                        <el-form-item label="传输模式：">
                            <el-radio-group
                                v-model="ruleForm.transmissionMode"
                                class="radio-group"
                                disabled
                            >
                                <el-radio
                                    v-for="(item,index) in CSMS"
                                    :key="index"
                                    class="radio-item"
                                    :label="item.id"
                                >
                                    {{ item.name }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="ruleForm.assetSourceDialectType ==10006||ruleForm.assetSourceDialectType ==10024"
                        :span="12"
                    >
                        <el-form-item label="HTTP header：">
                            <el-input
                                v-model="ruleForm.httpHeader"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col
                        :span="24"
                        style="text-align:right"
                    >
                        <el-button
                            v-if="ruleForm.assetSourceDialectType !== '10007' && ruleForm.assetSourceDialectType !== '10006'"
                            type="primary"
                            class="test_btn"
                            @click="testLink"
                        >
                            测试连接
                        </el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="数据类型：">
                            <el-radio-group
                                v-model="ruleForm.isStream"
                                class="radio-group"
                                disabled
                            >
                                <el-radio
                                    v-for="(item,index) in SJLX"
                                    :key="index"
                                    class="radio-item"
                                    :label="item.id"
                                >
                                    {{ item.name }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col
                        v-if="(ruleForm.assetSourceDialectType ==10001||ruleForm.assetSourceDialectType ==10002||ruleForm.assetSourceDialectType ==10004||ruleForm.assetSourceDialectType ==10010||ruleForm.assetSourceDialectType ==10020) && ruleForm.isStream=='1'"
                        :span="12"
                    >
                        <el-form-item label="数据接口方式：">
                            <el-select
                                v-model="ruleForm.interfaceType"
                                placeholder="请选择"
                                disabled
                            >
                                <el-option
                                    v-for="(item,index) in JRSJFS"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- <div class="mr-btn">
                <el-button @click="closeDialog">
                    取消
                </el-button>
      </div>-->
        </div>
        <span
            slot="footer"
        >
            <el-button @click="closeDialog">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { dataSource, getselectAccessDictionary, datasourceConnect } from '../../../api/databaseManagement';

const SOURCE_TYPE = {
    '01': {
        name: '数据库',
        value: [],
    },
    '02': {
        name: '文件',
        value: [],
    },
    '03': {
        name: '接口',
        value: [],
    },
};
const SJLX = [{ name: '流式数据', id: '1' }, { name: '批式数据', id: '0' }]; // 流式数据
const CSMS = [{ name: '被动', id: '0' }, { name: '主动', id: '1' }]; // 传输模式
const JRSJFS = [];

export default {
    data() {
        return {
            dialogVisible: false,
            loading: false,
            ruleForm: {
                systemFormat: '', // FTP系统编码
                sourceName: '', // 接入源名称
                systemName: '', // 应用系统名称
                ip: '', // ip
                insertIp: '', // 接入端ip
                port: '', // 端口号
                pwd: '', // 密码
                userName: '', // 用户名
                databaseName: '', // 实例/数据库名
                isStream: '0', // 流式数据
                schemaName: '', // 模式名/架构名/schema
                assetSourceDialectType: '', // 数据源类型
                transmissionMode: 1, // 传输模式
                httpHeader: '',
                secretKey: '', // 证书
            },
            SOURCE_TYPE,
            SJLX,
            JRSJFS,
            CSMS,
            FORMAT: [],
            systemFormat1: '',
        };
    },
    created() {
        const data = ['BIGDATA:ASSET:DataAccessType', 'BIGDATA:ASSET:DataAccessWay', 'BIGDATA:ASSET:ContentEncode'];
        this.getselectAccessDictionary(data);
    },
    computed: {

    },
    methods: {
        async getselectAccessDictionary(e) {
            try {
                const result = await getselectAccessDictionary(e);
                if (!result.data.resultCode == 0) {
                    throw result.data.resultMessage;
                }
                const temArr1 = result.data.data.ContentEncode;
                temArr1.forEach((e) => {
                    e.name = e.name,
                    e.id = e.id.toString()
                });
                this.FORMAT = temArr1;
                const temArr = result.data.data.DataAccessType;
                this.JRSJFS = result.data.data.DataAccessWay;
                const temobj = JSON.parse(JSON.stringify(SOURCE_TYPE));
                temArr.forEach((e) => {
                    temobj[e.level].value.push({
                        code: e.dataValue.toString(),
                        name: e.dataName,
                        id: e.dataValue,
                    });
                });
                this.SOURCE_TYPE = temobj;
            } catch (error) {
                this.$message.error(error);
            }
        },
        openDialogVisible(id) {
            const data = ['BIGDATA:ASSET:DataAccessType', 'BIGDATA:ASSET:DataAccessWay', 'BIGDATA:ASSET:ContentEncode'];
            this.getselectAccessDictionary(data);
            this.dialogVisible = true;
            this.loading = true;
            dataSource(id)
                .then((res) => {
                    this.loading = false;
                    if (res.data.resultCode == 0) {
                        this.ruleForm = res.data.data;
                        let name = '';
                        this.FORMAT.forEach((a) => {
                            if (a.dataValue === this.ruleForm.systemFormat) {
                                name = a.dataName;
                            }
                        });
                        this.$set(this.ruleForm, 'systemFormat1', name);
                    } else {
                        this.ruleForm = {};
                        this.$message.error(res.data.resultMessage);
                    }
                })
                .catch((err) => {
                    this.loading = false;
                });
        },

        // 连接测试
        async testLink() {
            const data = {};
            data.userName = this.ruleForm.userName;
            data.dictionaryCode = this.ruleForm.assetSourceDialectType;
            data.instanceName = this.ruleForm.databaseName;
            data.ip = this.ruleForm.ip;
            data.password = this.ruleForm.pwd;
            data.port = this.ruleForm.port;
            data.url = this.ruleForm.url || undefined;
            data.model = this.ruleForm.schemaName || undefined;
            try {
                const result = await datasourceConnect(data);
                if (!result.data.resultCode == 0) {
                    throw result.data.resultMessage;
                } else {
                    this.$message.success(result.data.resultMessage);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        closeDialog() {
            this.dialogVisible = false;
        },
    },
};
</script>
<style lang="scss">
.accessSource {
  .el-dialog__header{
    line-height: 0;
    padding: 20px 30px 10px;
    // @include bg-color();
    // transition: background-color .3s;
    .el-dialog__title{
        // @include font-color();
        color: #0090FF;
        font-size: 20px;
    }
    .el-dialog__headerbtn{
        font-size: .3rem;
    }
}
  .radio-label {
  display: block;
}

.radio-group .radio-item {
  display: inline;
  line-height: 30px;
}

.item-line {
  display: block;
}

.form-bottom {
  border-top: 1px solid black;
  padding-top: 20px;
}
.radio-label {
  line-height: 30px;
}}


</style>
